<template>
  <div>
    <!--    TODO:检索修改-->
    <el-dialog
      title="今日活跃详情"
      :visible.sync="isShow"
      width="900px"
      destroy-on-close
      @close="close"
    >
      <div v-loading="loading">
        <div class="msg_top">
          <div class="item_l">
            <div>
              <div class="msg_lable">课程名称：</div>
              <div class="msg_text">{{ courseName }}</div>
            </div>
            <div>
              <div class="msg_lable">分院名称：</div>
              <div class="msg_text">{{ branchName }}</div>
            </div>
            <div>
              <div class="msg_lable">主讲教师：</div>
              <div class="msg_text">{{ principalName }}</div>
            </div>
            <div>
              <div class="msg_lable">辅助教师：</div>
              <div class="msg_text">{{ teacherNames || '--' }}</div>
            </div>

          </div>
          <div class="item_r">
            <div class="piechart" ref="piechart"></div>
          </div>
        </div>
        <div class="msg_middle">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            label-width="68px"
            class="form-search"
          >
            <!--            检索项改为级联 2025-01-03 杜梦会-->
            <el-form-item
              label="分院名称"
              prop="branchId"
            >
              <el-select
                filterable
                @change="branchChange(queryParams.branchId, 'queryParams')"
                v-model="queryParams.branchId"
                placeholder="请选择"
                clearable
                class="input-width"
              >
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="(item, index) in branch"
                  :key="index"
                  :label="item.branchName"
                  :value="parseInt(item.branchId)"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="专业名称"
              prop="majorId"
            >
              <el-select
                filterable
                @change="majorChange(queryParams.majorId, 'queryParams')"
                v-model="queryParams.majorId"
                placeholder="请选择"
                clearable
              >
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="(item, index) in majors"
                  :key="index"
                  :label="item.majorName"
                  :value="parseInt(item.majorId)"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="行政班" prop="name">
              <el-select v-model="queryParams.classId" placeholder="请选择行政班" clearable class="input-width"
              >
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="(item, index) in classes"
                  :key="index"
                  :label="item.className"
                  :value="parseInt(item.classId)"
                />
              </el-select>
            </el-form-item>
            <div class="search-button">
              <el-button
                v-preventReClick
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
              >
                搜索
              </el-button>
              <el-button
                v-preventReClick
                icon="el-icon-refresh"
                size="mini"
                @click="resetQuery"
              >
                重置
              </el-button>
            </div>
          </el-form>
        </div>
        <div class="table_h">
          <el-table
            :data="postList"
            style="width: 100%"
            size="mini"
            :row-style="{height: '0'}"
            :cell-style="{padding: '6px'}"
            :header-row-style="{height: '0'}"
            :header-cell-style="{height: '0'}"
          >
            <el-table-column label="排名" align="center" prop="sort"/>
            <el-table-column label="行政班" align="center" prop="className" show-overflow-tooltip/>
            <el-table-column label="分院名称" align="center" prop="branchName" show-overflow-tooltip/>
            <el-table-column label="专业名称" align="center" prop="majorName" show-overflow-tooltip
            />
            <el-table-column label="活跃人数" align="center" prop="activeCount"
                             show-overflow-tooltip
            />
            <el-table-column label="未结课人数" align="center" prop="studentCount"/>
            <el-table-column label="活跃人数占比" align="center" prop="activePercent"/>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getTodaystudyDetail } from '@/api/homePage'
import { listPost_branch, listPost_class, listPost_major } from '@/api/schoolOrganization/organization'

export default {
  components: {},
  name: 'todayStudyDetail',
  data() {
    return {
      loading: true,
      isShow: false,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        branchId: '',
        majorId: '',
        classId: '',
        courseId: ''
      },
      total: 20,
      classes: [],
      branch: [],
      majors: [],
      postList: [],
      arr: [],
      activePercent: '',
      courseName: '',
      principalName: '',
      teacherNames: '',
      branchName: ''
    }
  },
  watch: {
    classes: {
      immediate: true,
      handler(val) {
        if (val.length == 1) {
          this.queryParams.classId = val[0].classId
        }
      }
    },
    majors: {
      immediate: true,
      handler(val) {
        if (val.length == 1) {
          this.queryParams.majorId = val[0].majorId
        }
      }
    },
    'queryParams.branchId': {
      deep: true,
      async handler(val) {
        if (!val) {
          this.queryParams.majorId = undefined
          this.queryParams.classId = undefined
          this['classes'] = []
          this['majors'] = []
        } else {
          let response = await listPost_major({
            pageNum: 1,
            pageSize: 999,
            branchId: val
          })
          this['majors'] = response.rows
          this['majors'] = response.rows
        }
      }
    },
    'queryParams.majorId': {
      deep: true,
      async handler(val) {
        if (!val) {
          this.queryParams.classId = undefined
          this['classes'] = []
        } else {
          let response = await listPost_class({
            pageNum: 1,
            pageSize: 999,
            majorId: val
          })
          this['classes'] = response.rows
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    resetQuery() {
      // 把queryParams清空
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        branchId: '',
        majorId: '',
        classId: '',
        courseId: this.queryParams.courseId
      }
      this.handleQuery()
    },
    show(courseId) {
      this.queryParams.courseId = courseId
      this.isShow = true
      this.getBranch()
      this.handleQuery()

    },
    // 请求数据函数
    handleQuery() {
      this.loading = true
      getTodaystudyDetail(this.queryParams).then(res => {
        let { code, data } = res
        if (code == 200) {
          let arr = []
          if (data.classList) {
            arr = data.classList.map(e => {
              return {
                name: e.className,
                value: e.activeCount
              }
            })
            this.total = data.classList.length
            data.classList.forEach(e => {
              e.activePercent = e.activePercent ? e.activePercent + '%' : 0 + '%'
            })
          }
          this.postList = data.classList
          this.courseName = data.courseName ? data.courseName : ''
          this.principalName = data.principalName ? data.principalName : ''
          this.teacherNames = data.teacherNames ? data.teacherNames : ''
          this.branchName = data.branchName ? data.branchName : ''

          this.activePercent = data.activePercent ? data.activePercent : 0
          this.arr = arr

          this.$nextTick(() => {
            this.setCourseOption(this.activePercent, this.arr)
          })
          console.log(this.arr, 'dddddddd')
        }

      }).finally(() => {
        this.loading = false
      })
      //请求数据
      // 请求之后不管成功还是失败都要把loading改为false
    },
    setCourseOption(activePercent, arr) {
      let myCharts = echarts.init(this.$refs.piechart)
      let option
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}次 : {c}次 ({d}%)'
        },
        backgroundColor: '#fff',
        color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05'],
        grid: {
          left: 500,
          top: 50,
          bottom: 10,
          right: 10,
          containLabel: true
        },
        polar: {
          // center: [150, 150]
        },
        angleAxis: {
          interval: 1,
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B4A6B',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            show: false,
            interval: 0,

            color: '#0B4A6B',
            margin: 8,
            fontSize: 14
          }
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,.0)',
              width: 0

            }
          },
          axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 10, 0],
            color: '#0B3E5E',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#F1F8FF',
              width: 2,
              type: 'solid'
            }
          }
        },
        calculable: true,
        graphic: {
          type: 'text',
          left: 'center',
          top: '48%',
          style: {
            text: `${activePercent}%`,
            textAlign: 'center',
            fill: '#333',
            fontSize: 11
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['19%', '20%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55
              }
            },
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: '#B5CCE7'
                  }
                },
                tooltip: {
                  show: false
                }
              }
            ]
          },
          {
            type: 'pie',
            radius: ['86%', '88%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55
              }
            },
            name: '',
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: '#F1F8FF'
                  }
                },
                tooltip: {
                  show: false
                }
              }
            ]
          },
          {
            stack: 'a',
            type: 'pie',
            radius: ['26%', '76%'],
            roseType: 'area',
            zlevel: 10,
            label: {
              normal: {
                show: true,
                formatter: function(param) {
                  let style = ''
                  switch (param.name) {
                  }
                  return '{a|' + param.name + '}\n' + '（' + style + param.value + '次' + '）'
                },
                textStyle: {
                  fontSize: 12
                },
                rich: {
                  a: {
                    color: '#666666',
                    fontSize: '12'
                  },
                  s1: {
                    color: '#F25646',
                    fontSize: '12'
                  },
                  s2: {
                    color: '#FA971E',
                    fontSize: '12'
                  },
                  s3: {
                    color: '#EDC644',
                    fontSize: '12'
                  },
                  s4: {
                    color: '#47B17D',
                    fontSize: '12'
                  },
                  s5: {
                    color: '#43C9D2',
                    fontSize: '12'
                  },
                  s6: {
                    color: '#4BCFFC',
                    fontSize: '12'
                  },
                  s7: {
                    color: '#0892E5',
                    fontSize: '12'
                  },
                  s8: {
                    color: '#0464DB',
                    fontSize: '12'
                  }
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = [

                    {
                      c1: '#c5223b',
                      c2: '#fa768a'
                    },
                    {
                      c1: '#de7110',
                      c2: '#fecd70'
                    },
                    {
                      c1: '#d09f08',
                      c2: '#FFD145'
                    },
                    {
                      c1: '#238483',
                      c2: '#55C27C'
                    },
                    {
                      c1: '#45EAFF',
                      c2: '#40ADAC'
                    },
                    {
                      c1: '#12B3F8',
                      c2: '#7DE8FF'
                    },
                    {
                      c1: '#0176D3',
                      c2: '#13B7FF'
                    },
                    {
                      c1: '#015BD3',
                      c2: '#138DFF'
                    },
                    {
                      c1: '#FF8888',
                      c2: '#CC0000'
                    },
                    {
                      c1: '#FFDD55',
                      c2: '#DDAA00'
                    },
                    {
                      c1: '#DDFF77',
                      c2: '#99DD00'
                    },
                    {
                      c1: '#66FF66',
                      c2: '#00DD00'
                    },
                    {
                      c1: '#77FFEE',
                      c2: '#00DDAA'
                    },
                    {
                      c1: '#77DDFF',
                      c2: '#009FCC'
                    },
                    {
                      c1: '#9999FF',
                      c2: '#0000CC'
                    },
                    {
                      c1: '#FF77FF',
                      c2: '#CC00CC'
                    },
                    {
                      c1: '#FFBB66',
                      c2: '#EE7700'
                    },
                    {
                      c1: '#FF88C2',
                      c2: '#C10066'
                    }
                  ]
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[params.dataIndex].c1
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c2
                    }
                  ])
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 30,
                color: '#4BCFFC'
              },
              emphasis: {
                show: true
              }
            },
            data: arr
          }
        ]
      }
      option && myCharts.setOption(option)
    },
    async branchChange(val, queryParams) {
      this.queryParams.majorId = undefined
      this.queryParams.classId = undefined
      this['classes'] = []
      this['majors'] = []
      let response = await listPost_major({
        pageNum: 1,
        pageSize: 999,
        branchId: val
      })
      this['majors'] = response.rows
      if (queryParams) {
        this.queryParams.majorId = undefined
        this.queryParams.classId = undefined
        this.majors = response.rows
      }
    },
    async majorChange(val, queryParams) {
      this.queryParams.classId = undefined
      this['classes'] = []
      let response = await listPost_class({
        pageNum: 1,
        pageSize: 999,
        majorId: val
      })
      this['classes'] = response.rows
      if (queryParams) {
        this.queryParams.classId = undefined
        this.classes = response.rows
      }
    },
    // 获取分院
    getBranch() {
      listPost_branch({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId
      }).then((response) => {
        this.branch = response.rows
      })
    },
    // 获取专业
    getMajorList() {
      listPost_major({
        pageNum: 1,
        pageSize: 9999,
        branchId: this.queryParams.branchId
      }).then(res => {
        if (res.code == 200) {
          this.majors = res.rows
        }
        console.log(res, 'sddsdsdsd')
      })
    },
    // 获取班级
    getClassList() {
      listPost_class({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId
      }).then(res => {
        if (res.code == 200) {
          this.classes = res.rows
        }
      })

    },
    close() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        branchId: '',
        majorId: '',
        classId: '',
        courseId: ''
      }
      this.total = 20
      this.classes = []
      this.branch = []
      this.majors = []
      this.postList = []
      this.arr = []
      this.activePercent = ''
      this.courseName = ''
      this.principalName = ''
      this.teacherNames = ''
      this.branchName = ''
      this.isShow = false
    }

  }
}
</script>
<style scoped lang="scss">
.msg_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.item_l {
  width: 30%;
  cursor: default;

  div {
    display: flex;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
  }

  .msg_lable {
    width: 80px;
    min-width: 80px;
  }
}

.item_r {
  width: 70%;
  height: 240px;
  //background: pink;
  .piechart {
    width: 100%;
    height: 100%;
  }
}

.input-width {
  width: 180px;
}

.form-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.search-button {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

:deep(.pagination-container) {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.msg_middle {
  margin-bottom: 10px;
}

.table_h {
  height: 228px;
  overflow: scroll
}
</style>
